<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
   	<title>登陆</title>
	<meta http-equiv="pragma" content="no-cache"></meta>
	<meta http-equiv="cache-control" content="no-cache"></meta>
	<meta http-equiv="expires" content="0"></meta>
	<jsp:include page="/WEB-INF/public/jquery-header.jsp"></jsp:include>
	<jsp:include page="/WEB-INF/public/bootstarp-header.jsp"></jsp:include>
	</head>
	<style>
	body{
		font-family: '微软雅黑';
	}
	  .bg{
	  	position: absolute;
	  	height: 100%;
	  	width: 100%;
	  }
	  .bg img{
	  	height: 100%;
	  	width: 100%;
	  }
	  .center{
	  	background:#FFF;
	  	position: relative;
	  	margin:0px auto;
	  	top: 100px;
	  	width:80%;
	  	height: 400px;
	  }
	  .center .left{
	  	float:left;
	  	width: 62%;
	  	height: 400px;
	  	background: rgb(238, 236, 236);
	  }
	  .center .login{
		position: absolute;
	  	float: right;
		right: 50px;
	  }
	  .showload{
	  	 position: relative;
         float:right;
         width: 38%;
         height: 400px;
         z-index: 99999;
         display: none;
         background-color: #000;
       }
       .showload img{position: absolute;width: 124px;height:124px;margin-left: -62px;margin-top: -62px;left: 50%;top: 50%;}
  </style>
  <body>
  <script type="text/javascript">
  	function login(){
  		$.post(
  			"${pageContext.request.contextPath }/user/login",
  			{username:$("#inusername").val(),password:$("#inpassword").val(),autologin:document.getElementById("auto").checked},
  			function(data){
  				if(data.stat == 0){window.location = "${pageContext.request.contextPath }/";}
				if(data.stat==1){
  					$("#pmg").html(data.msg);
  					$("#username").attr("class","form-group has-error");
  					$("#password").attr("class","form-group has-error");
  				}
  				$("#showloaddiv").fadeOut();
  			}
  		);
  	}
  	function myloading(){
         $("#showloaddiv").fadeTo("slow",0.3);
         login();
         return false;
    }
  </script>
  <div class="bg">
  	<img src="${pageContext.request.contextPath }/image/<%=(int)(Math.random()*10%3) %>.jpg">
  </div>
  <div class="center">
  <div class="showload" id="showloaddiv"><img id="showload" src="${pageContext.request.contextPath}/image/loading.gif"></div>
  <div class="left"></div>
  <div class="login">
  	<div class="page-header" style="text-align: center;font-family: '微软雅黑';font-size: 19px;">账号密码登录</div>
  	<form id="loginform" action="#" onsubmit="return false;" method="post" style="width: 300px;">
  		<div class="form-group" id="username">
            <input type="text" id="inusername" name="username" class="form-control" placeholder="用户名" onkeydown="$('#username').attr('class','form-group');$('#umg').html('');">
        </div>
        <div id="umg" style="min-height: 20px;color: red"></div>
  		<div class="form-group" id="password">
            <input type="password" id="inpassword" name="password" class="form-control" placeholder="密码" onkeydown="$('#password').attr('class','form-group');$('#pmg').html('');">
        </div>
        <div id="pmg" style="min-height: 20px;color: red"></div>
        <div><label for="auto"><input id="auto" type="checkbox" name="autologin" >一周内自动登陆</label></div>
		<button onclick="myloading();return false;" class="btn btn-primary" style="width: 100px;">登录</button>
		<a class="btn btn-primary" style="width: 100px;float: right;" href="${pageContext.request.contextPath }/user/reg_view">注册</a>
  	</form>
  </div>
  </div>
  </body>
</html>
